@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}
body {
  width: 100vw;
  height: 100vh;
  @include center();

  main {
    width: 400px;
    height: 400px;
    @include center();
    border: solid 1px #ddd;
    div {
      width: 100px;
      height: 100px;
      background: red;
      transition-duration: 3s;
      transform-origin: 300px 300px;
    }
  }
  & > main:hover div {
    transform: rotate(360deg);
  }
}
